<template>
  <div class="page">
    <div class="card all">
      <el-date-picker @change="queryData" v-model="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期">
      </el-date-picker>
      <el-scrollbar class="height">
        <div v-if="datas.length > 0">
          <div v-for="(item, index) in datas" :key="index">
            <LabelBox>
              <span slot="left">{{ item.product }}</span>
              <!-- <span slot="center">August 2020</span> -->
            </LabelBox>
            <div v-for="t in item.lines" :key="t.lineNo">
              <!-- <span>{{lineNo}}</span> -->
              <el-table border :data="t.stations" @row-click="goToAnalyse(item, t, $event)" stripe>
                <el-table-column width="70" align="center" :label="t.lineNo"> </el-table-column>
                <el-table-column width="100" align="center" prop="station" label="Station"> </el-table-column>
                <el-table-column prop="process Nok" label="processNok">
                  <template slot-scope="scope">
                    <div>
                      <el-progress :stroke-width="20" :percentage="Math.floor(scope.row.processNok * 10000) / 100"></el-progress>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="repeatTests" label="repeatTests">
                  <template slot-scope="scope">
                    <div>
                      <el-progress :stroke-width="20" :percentage="Math.floor(scope.row.repeatTests * 10000) / 100"></el-progress>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="gearsNokOn1stTest">
                  <template slot-scope="scope">
                    <div>
                      <el-progress :stroke-width="20" :percentage="Math.floor(scope.row.gearsNokOn1stTest * 10000) / 100"></el-progress>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="workerSeatsNok">
                  <template slot-scope="scope">
                    <div>
                      <el-progress :stroke-width="20" :percentage="Math.floor(scope.row.workerSeatsNok * 10000) / 100"></el-progress>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column prop="measurementsNok" label="measurementsNok">
                  <template slot-scope="scope">
                    <div>
                      <el-progress :stroke-width="20" :percentage="Math.floor(scope.row.measurementsNok * 10000) / 100"></el-progress>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="gears Scrap" label="gearsScrap">
                  <template slot-scope="scope">
                    <div>
                      <el-progress :stroke-width="20" :percentage="Math.floor(scope.row.gearsScrap * 10000) / 100"></el-progress>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="gears" label="gears"> </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div v-else style="height: 500px;font-size: 25px;color: #828282;display: flex;justify-content: center;align-items: center;">
          暂无数据
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
export default {
  name: "Summary",
  data() {
    return {
      datas: [],
      inputValue: "",
      date: this.getTime(),
    };
  },
  mounted() {
    this.queryData();
  },
  methods: {
    goToAnalyse(item, t, row) {
      this.$router.push({
        name: "MonthAnalysis",
        params: {
          typeno: item.product,
          lineno: t.lineNo,
          stationno: row.station,
        },
      });
    },
    queryData() {
      this.$http
        .request({
          url: "api/Foreigner/selectOne",
          method: "GET",
          showLoading: true,
          params: {
            // date: this.date,
            date: "2020-12-15",
          },
        })
        .then((resp) => {
          if (resp.status == 100) {
            this.datas = resp.data || [];
            localStorage.setItem("cascaderData", JSON.stringify(this.datas));
          }
        });
    },
    getTime() {
      var date = new Date();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
  },
};
</script>
<style lang="scss">
.el-progress__text {
  font-size: 14px !important;
}
.el-progress-bar {
  padding-right: 65px;
  margin-right: -70px;
}
</style>
